<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit ${pae.title} Related Info</title>
    <!-- zui -->
    <link href="${ctx}/res/zui/dist/css/zui.min.css" rel="stylesheet">
    <link href="${ctx }/res/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${ctx }/res/bootbox/bootbox.min.css" rel="stylesheet">

    <style type="text/css">
        nav.navbar{
            border-radius: 0px;
        }

        .table img{
            width: 120px;
            height: 120px;
            border-radius: 5px;
        }

        .table td{
            vertical-align: middle;
        }

        .text-center{
            text-align: center;
        }


    </style>
</head>
<body>
<jsp:include page="common/header.jsp"></jsp:include>
<div class="container-fluid">

    <div class="row">
        <div class="col-xs-2">
            <jsp:include page="common/menu.jsp"></jsp:include>
        </div>

        <!-- Start content -->
        <div class="col-xs-10">
            <h3>Edit <span style="font-style: italic;">${pae.title}</span> Related Info</h3>
            <hr>

            <div class="panel">
                <div class="panel-heading">
                    <h4>Existing Related Item</h4>
                </div>
                <div class="panel-body">

                    <table class="table table-bordered table-hover" id="dataTables1" style="width: 100%;">
                        <thead>
                        <tr>
                            <th style="text-align: center">ID</th>
                            <th style="text-align: center;width: 130px;">Cover</th>
                            <th>Title</th>
                            <th>Type</th>
                            <th>(Lon,Lat)</th>
                            <th>State</th>
                            <th>Tag</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>

            <div class="panel">
                <div class="panel-heading">
                    <h4>Add New Related Item</h4>
                </div>
                <div class="panel-body">
                    <form id="searchForm">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="form-group">
                                    <label for="title">Title</label>
                                    <input type="text" class="form-control" id="title" name="key" placeholder="Search by title">
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <div class="form-group">
                                    <label for="type">Type</label>
                                    <select class="form-control" id="type" name="type">
                                        <option value=""></option>
                                        <option value="1">Place</option>
                                        <option value="2">Experience</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <div class="form-group">
                                    <label for="state">State</label>
                                    <select class="form-control" id="state" name="states">
                                        <option value=""></option>
                                        <c:forEach items="${states}" var="state">
                                            <option value="${state.code}">${state.stateName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-offset-1 col-xs-1" style="margin-top: 24px;">
                                <button type="button" class="btn btn-primary" onclick="searchInfo();"><i class="icon icon-search"></i> Search</button>
                            </div>

                        </div>
                    </form>
                    <table class="table table-bordered table-hover" id="dataTables2" style="width: 100%;">
                        <thead>
                        <tr>
                            <th style="text-align: center">ID</th>
                            <th style="text-align: center;width: 130px;">Cover</th>
                            <th>Title</th>
                            <th>Type</th>
                            <th>(Lon,Lat)</th>
                            <th>State</th>
                            <th>Tag</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!-- End content -->

    </div>
</div>

<script src="${ctx}/res/jquery/jquery.js"></script>
<script src="${ctx}/res/zui/dist/js/zui.min.js"></script>
<script src="${ctx}/res/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="${ctx}/res/bootbox/bootbox.min.js"></script>

<script type="application/javascript">
    var tb1;
    var tb2;
    $(document).ready(function() {

        tb1=$('#dataTables1').DataTable({
            responsive: true,
            serverSide: false,
            processing: true,
            ordering:false,
            searching:true,
            ajax: {
                url:'${ctx}/admin/pae/${pae.id}/related',
                method:'get'
            },
            columns:[
                {data:'id',className:'text-center'},
                {data:function(o){
                    return '<img src="${ctx}/res/pic/'+o.cover+'"/>';
                },className:'text-center'},
                {data:'title'},
                {data:function(o){
                    if(o.type==1){
                        return 'Place';
                    }else{
                        return 'Experience';
                    }
                }},
                {data:function(o){
                    return '('+o.lon+','+o.lat+')';
                }},
                {data:'stateName'},
                {data:function(o){
                    var html=[];
                    for(var tagName in o.tagNameList){
                        html.push('<span class="label label-'+randomLabel()+'">'+o.tagNameList[tagName]+'</span>');
                    }
                    return html.join('<br/>');
                }},
                {}
            ],
            columnDefs: [ {
                targets: -1,
                'data':null,
                'defaultContent':  '<button class="btn btn-danger btn-sm remove" title="Remove Related" ><i class="icon icon-minus-sign-alt"></i> Remove</button>',
            } ]
        });


        $('#dataTables1 tbody').on( 'click', 'button.remove', function () {
            var data = tb1.row( $(this).parents('tr') ).data();
            remove(data);
        });

        tb2=$('#dataTables2').DataTable({
            responsive: true,
            serverSide: true,
            processing: true,
            ordering:false,
            searching:false,
            ajax: {
                url:'${ctx}/admin/pae',
                method:'get',
                data:searchParam
            },
            columns:[
                {data:'id',className:'text-center'},
                {data:function(o){
                    return '<img src="${ctx}/res/pic/'+o.cover+'"/>';
                },className:'text-center'},
                {data:'title'},
                {data:function(o){
                    if(o.type==1){
                        return 'Place';
                    }else{
                        return 'Experience';
                    }
                }},
                {data:function(o){
                    return '('+o.lon+','+o.lat+')';
                }},
                {data:'stateName'},
                {data:function(o){
                    var html=[];
                    for(var tagName in o.tagNameList){
                        html.push('<span class="label label-'+randomLabel()+'">'+o.tagNameList[tagName]+'</span>');
                    }
                    return html.join('<br/>');
                }},
                {}
            ],
            columnDefs: [ {
                targets: -1,
                'data':null,
                'defaultContent':  '<button class="btn btn-success btn-sm add" title="Add Related" ><i class="icon icon-plus-sign-alt"></i> Add</button>',
            } ]
        });

        $('#dataTables2 tbody').on( 'click', 'button.add', function () {
            var data = tb2.row( $(this).parents('tr') ).data();
            add(data);
        });
    });



    var labels=['default','primary','success','info','warning','danger'];
    function randomLabel(){
        return labels[randomNum(0,6)];
    }

    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }


    function remove(data){
        bootbox.confirm({
            message: 'You will remove <b>'+data.title+'</b>. Are you sure?',
            size:'small',
            callback: function (result) {
                if(!result)
                    return;

                $.ajax({
                    url:'${ctx}/admin/pae/${pae.id}/related/'+data.id,
                    type:'delete',
                    dataType:'json',
                    success:function(result){
                        if(result.success){
                            new $.zui.Messager('Success!').show();
                            tb1.ajax.reload();
                        }else{
                            new $.zui.Messager(result.errmsg).show();
                        }
                    },
                    error:function(){
                        new $.zui.Messager('Failed, Please retry.').show();
                    }
                });
            }

        });
    }
    function add(data){

        $.ajax({
            url:'${ctx}/admin/pae/${pae.id}/related/'+data.id,
            type:'post',
            dataType:'json',
            success:function(result){
                if(result.success){
                    new $.zui.Messager('Success!').show();
                    tb1.ajax.reload();
                }else{
                    new $.zui.Messager(result.errmsg).show();
                }
            },
            error:function(){
                new $.zui.Messager('Failed, Please retry.').show();
            }
        });

    }



    //返回搜索参数
    function searchParam(d){
        var fields =$('#searchForm').serializeArray(); //自动序列化表单元素为JSON对象数据格式如下
        // [
        //     {name: 'firstname', value: 'Hello'},
        //     {name: 'lastname', value: 'World'},
        //     {name: 'alias'}, // this one was empty
        // ]
        //var params={};
        $.each( fields, function(i, field){//设置查询参数
            d[field.name] = field.value;
        });
    }

    //执行搜索
    function searchInfo(){
        tb2.ajax.reload();
    }

</script>
</body>
</html>